<!--  -->
<template>
  <div id="normal-preview-ElementImg">
    <ElImageViewer
      style="z-index: 3000"
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="StartUrls"
      :StartIndex="StartIndex"
      :info="info"
    />
  </div>
</template>

<script>
// 导入组件
import ElImageViewer from "./image-viewer";
export default {
  props: {
    url: {
      type: String,
      default: "",
    },
    /**
     * property1 : String 图片Url地址
     * property2 : Object { url:图片Url地址, name:图片名称, id:图片下载ID}
     */
    urls: {
      type: Array,
      default: () => [],
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      showViewer: true,
      StartUrls: [],
      StartIndex: -1,
    };
  },
  methods: {
    closeViewer() {
      this.showViewer = false;
    },
  },
  beforeMount() {
    // 查找当前点开的图片的在urls中的位置
    for (let i in this.urls) {
      if (this.urls[i] === this.url || this.urls[i].url === this.url) {
        this.StartUrls = this.urls;
        this.StartIndex = Number(i);
        return;
      }
    }
    if (this.StartIndex === -1) {
      // urls 列表中不存在展示的 url
      this.StartUrls = [this.url];
      this.StartIndex = 0;
    }
  },
  computed: {},
  components: {
    ElImageViewer,
  },
};
</script>
<style lang="scss" scoped>
.DownLoad {
  position: fixed;
  z-index: 3001;
  right: 100px;
  top: 42px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.8;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #383838;
}
.preview-video-box {
  width: 100%;
  .preview-video {
    width: 100%;
    height: 100%;
    max-height: 80vh;
    background: #000000;
    object-fit: cover;
  }
  .preview-audio {
    width: 100%;
    height: 100%;
    background: #000000;
  }
}
.infor {
  font-size: 14px;
  color: #8f8f8f;
  display: inline-flex;
  align-items: flex-end;
  padding-left: 15px;
}
</style>
